<template>
	<view class="news">
		<view class="search">
			<input type="text" @focus="handelGoToSearch" placeholder-style="text-indent: 20rpx;"  />
		</view>
		<view class="content-list">
			<goods-list-com :goodsList="goodsList" @gotoGoodsDetail="handelGoToDetail"></goods-list-com>
		</view>
		<view class="isOver" v-if="flag">--------我是有底线的--------</view>
	</view>
</template>

<script>
	import goodsListCom from '../../components/goods-list-com/index.vue'
	import { apiGetGoodsDatas } from '../../util/user.js'
	export default{
		components:{
			goodsListCom
		},
		data(){
			return{
				queryParams: {
					query: '',
					cid: '',
					pagenum: 1,
					pagesize: 10
				},
				//页数
				totalPages: 1,
				goodsList:[],
				flag:false
			}
		},
		methods:{//获取商品列表的数据
			getGoodsDatas(){
				apiGetGoodsDatas(this.queryParams).then(res => {
					console.log(res.data.message)
					// 条数
					const total = res.data.message.total;
					// 页数
					this.totalPages = Math.ceil(total / this.queryParams.pagesize);
					this.goodsList = [...this.goodsList,...res.data.message.goods];
					// console.log(res.data.message.goods);
					uni.stopPullDownRefresh();
				});
			},
			//跳转到商品详情页
			handelGoToDetail(id){
				uni.navigateTo({
					url:'/pages/goods-detail/goods-detail?goods_id=' + id
				})
			},
			handelGoToSearch(){
				uni.navigateTo({
					url:"/pages/news-search/index"
				})
			}
		},
		onLoad(){
			this.getGoodsDatas();
		},
		onPullDownRefresh(){
			this.pageindex = 1;
			this.goodsDataLists = [];
			this.flag = false;
			setTimeout(()=>{
				this.getGoodsDatas();
			},1000)
		},
		onReachBottom: function(e) {
			if (this.queryParams.pagenum >= this.totalPages) {
				// console.log("没有下一页数据");
				uni.showToast({
					title: '我是有底线的哟'
				});
			} else {
				// console.log("请加载下一页数据");
				this.queryParams.pagenum++;
				this.getGoodsDatas();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search{
		position: fixed;
		width: 100%;
		background-color: #B50E03;
		padding: 20rpx 0;
		z-index: 9999;
		input{
			width: 95%;
			height: 60rpx;
			border-radius: 15rpx;
			border: 1rpx solid #fff;
			outline: 0;
			background-color: #FFFFFF;
			margin: 0 auto;
		}
	}
	.content-list{
		padding-top: 100rpx;
	}
	.isOver{
		margin-top: 50rpx;
		text-align: center;
		color: #FFFFFF;
	}
</style>
